<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	    <title>个人中心</title>
		
	    <!-- Bootstrap -->
	    <link href="/hoyo/css/bootstrap.min.css" rel="stylesheet">
	    <link href="/hoyo/css/mine.css" rel="stylesheet" />
	    <style>
	    	body{
	    		background-color: #f1f3f7;
	    	}
	    	#data-nav{
	    		margin-bottom: 0px;
	    	}
	    	.user-center-ul{
	    		list-style-type: none;
	    		padding: 0;
	    		margin: 0;
	    	}
	    	.center-icon{
	    		display: inline-block;
	    		height: 48px;
	    		vertical-align: top;
	    	}
	    	.center-icon-c{
	    		margin-top: 13px;
	    		width: 20px;
	    		height:20px;
	    	}
	    	.user-center-left{
	    		background-color: #FFFFFF;
	    		box-shadow: #c7ced1 0 0 5px;
	    		border-top-left-radius: 6px;
	    		border-bottom-left-radius: 6px;
	    		height: 766px;
	    	}
	    	.user-center-ul li{
	    		display: block;
	    		height: 48px;
	    	}
	    	.user-center-ul li a{
	    		text-align: center;
	    		display:block;
	    		display: block;
	    		text-align: center;
	    		cursor: pointer;
	    		color: #2D2D2D;
	    	}
	    	.user-center-ul li a:hover{
	    		text-decoration: none;
	    		color: currentcolor;
	    	}
	    	.center-title{
	    		line-height: 48px;
	    		display: inline-block;
	    		width: 56px;
	    		margin-left: 12px;
	    		font-family: "微软雅黑";
	    		font-size: 14px;
	    	}
	    	.center-li-active a{
	    		background-color: #00a1d7 !important;
	    		color: #fff !important;
	    	}
	    	.user-center-right{
	    		background-color: #FFFFFF;
	    		box-shadow: #c7ced1 0 0 5px;
	    		padding: 0px 0px 5px 50px !important;
	    		min-height: 766px;
	    	}
	    	.clear{
	    		margin: 0;
	    		padding: 0;
	    	}
	    	#user-info{
	    		font-family: "微软雅黑";
	    		font-size: 14px;
	    		font-weight: normal;
	    	}
	    	.title{
	    		height: 48px;
	    		line-height: 48px;	
	    		color: #00BDEF;
	    		font-weight: bold;
	    	}
	    	label{
	    		font-weight: normal;
	    		width: 100px;
	    		font-size: 12px;
	    		padding-left: 10px;
	    	}
	    	.form-group{
	    		margin-top: 30px;
	    	}
	    	.btn-sm{
	    		margin-right: 10px;
	    		padding:3px 16px;
	    	}
	    	.btn-sumbit{
	    		padding-right: 16px;
	    		padding-left: 16px;
	    	}
	    	.btn-box{
	    		text-align: center;
	    		margin-top: 150px;
	    		margin-left: -25px;
	    	}
	    	.username{
	    		padding: 0;
	    	}
	    	.error-wrp{
				position: relative;
				height: 30px;
				line-height: 30px;
				color: #E40C0C;
				font-size: 14px;
				margin-top: 5px;
				padding-left: 100px;
			}
	    </style>
	</head>
	<body>
		
		<div id="data-nav" class="navbar">
			<div class="container">
		  	<div class="navbar-header">
		      <a class="navbar-brand" href="/hoyo/">
		      	<img src="/hoyo/img/logo.png" class="data-img"/>
		      	<span class="data-span">主页</span>
		      </a>
		    </div>
		
	      <ul id="contributor" class="nav navbar-nav navbar-right">
	      	<li>
	      		<a class="data-user" href="/hoyo/user/personalCenter">
	      			<img th:src="${session.userInfo.icon}" class="data-img img-circle"/>
	      			<span class="nav-user-name" th:text="${session.userInfo.nickname}" id="userName">iscream</span>
	      		</a>
	      	</li>
	        <li class="dropdown">
	          <a href="/hoyo/upload" class="dropdown-toggle data-color">投稿</a>
	      	</li>
		  </div>
		</div>
		
		
		
		<div class="container-fluid" style="background-color: #00a0d8;margin-bottom: 50px;">
			<div class="container">
				<img src="/hoyo/img/login-bc.png" />
			</div>
		</div>
		<div class="container">
			<div class="col-lg-2 clear">
				<div class="user-center-left">
					<ul class="user-center-ul">
						<li>
							<a href="/hoyo/user/personalCenter">
								<div class="center-icon">
									<svg class="icon center-icon-c" aria-hidden="true">
									  <use xlink:href="#icon-shouye"></use>
									</svg>
								</div>
								<span class="center-title">首&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页</span>
							</a>
						</li>
						<li  class="center-li-active">
							<a href="/hoyo/user/personInfo">
								<div class="center-icon">
									<svg class="icon center-icon-c" aria-hidden="true">
									  <use xlink:href="#icon-geren"></use>
									</svg>
								</div>
								<span class="center-title">我的信息</span>
							</a>
						</li>
						<li>
							<a href="/hoyo/user/modifyicon">
								<div class="center-icon">
									<svg class="icon center-icon-c" aria-hidden="true">
									  <use xlink:href="#icon-8"></use>
									</svg>
								</div>
								<span class="center-title">我的头像</span>
							</a>
						</li>
						<li>
							<a href="/hoyo/user/userLikeCatalog">
								<div class="center-icon">
									<svg class="icon center-icon-c" aria-hidden="true">
									  <use xlink:href="#icon-shoucang2"></use>
									</svg>
								</div>
								<span class="center-title">我的收藏</span>
							</a>
						</li>
						<li >
							<a href="/hoyo/user/safeCenter">
								<div class="center-icon">
									<svg class="icon center-icon-c" aria-hidden="true">
									  <use xlink:href="#icon-anquan"></use>
									</svg>
								</div>
								<span class="center-title">账号安全</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="col-lg-10 clear">
				<div class="row  clear user-center-right" id="user-info" style="display:none;">
					<p class="title">我的信息</p>
					<div class="form-group form-inline">
					    <label>昵称:</label>
					    <input type="text" class="form-control input-sm" id="username" placeholder="请输入昵称" :value="user.nickname" @input="updateName($event.target,$event.target.value)"/>
						<div class="error-wrp" v-show="nameError">
							<svg class="icon error-icon" aria-hidden="true">
							  <use xlink:href="#icon-linedesign-11"></use>
							</svg>
							{{errorMsg.username}}
						</div>
					</div>
					
					<div class="form-group form-inline">
					    <label >性别:</label>
					    <button class="btn btn-default btn-sm" :class="{ 'btn-info': genderClass}"  type="button" @click="genderChange('男')">男</button>
					    <button class="btn btn-default btn-sm" :class="{ 'btn-info': !genderClass}" type="button" @click="genderChange('女')">女</button>
					</div>
					<div class="form-group form-inline">
					    <label >出生日期:</label>
						<datepicker v-ref:dp :value.sync="user.birthday" :disabled-days-of-Week="disabled" :format="format.toString()" :clear-button="clear" :placeholder="placeholder" ></datepicker>
						<div class="error-wrp" v-show="dateError">
							<svg class="icon error-icon" aria-hidden="true">
							  <use xlink:href="#icon-linedesign-11"></use>
							</svg>
							{{errorMsg.date}}
						</div>
					</div>
					<div class="form-group form-inline">
					    <label for="introduction" style="vertical-align: top;margin-top: 5px;">我的简介:</label>
					    <textarea id="introduction" v-model.trim="message" @input="updateDescription($event.target.value)" class="form-control" style="width: 600px;" rows="5" v-html="message"></textarea>
						<div class="error-wrp" v-show="descriptionError">
							<svg class="icon error-icon" aria-hidden="true">
							  <use xlink:href="#icon-linedesign-11"></use>
							</svg>
							{{errorMsg.description}}
						</div>
					</div>
					<div class="btn-box">
						<button id="submit" class="btn btn-info btn-hg btn-sumbit" type="button" @click="save()">保存</button>
					</div>
				</div>
				</div>
			</div>	
		</div>
		
	</body>
	<script src="/hoyo/js/jquery-3.2.1.min.js"></script>
    <script src="/hoyo/js/bootstrap.min.js"></script>
    <script src="/hoyo/js/vue1.0.26.js"></script>
    <script src="/hoyo/js/vue-strap.min.js"></script>
    <script src="/hoyo/js/iconfont.js"></script>
    <script th:inline="javascript">
        var userInfo =  [[${session.userInfo}]];
        console.log(userInfo);
    	var datePicker = new Vue({
    		components: {
              datepicker: VueStrap.datepicker
          	},
          	el:"#user-info",
          	 data:{
          	 	  user:{
          	 	  	nickname:userInfo.nickname,
          	 	  	sex:userInfo.sex,
          	 	  	birthday: [[(${userInfo.birthday}!=null ? ${#calendars.format(userInfo.birthday, 'yyyy-MM-dd')} : '')]],
          	 	  	description:userInfo.description
          	 	  },
          	 	  errorMsg:{
          	 	  	username:'',
          	 	  	description:'',
          	 	  	date:''
          	 	  },
          	 	  nameError:false,
          	 	  message:userInfo.description,
          	 	  descriptionError:false,
          	 	  dateError:false,
			      disabled: [],
			      format: ['yyyy-MM-dd'],
			      clear: true,
			      placeholder: '请输入你的生日日期'
			  },
			  watch: {
			    disabled () {
			      this.$refs.dp.getDateRange()
			    },
			    format (newV) {
			      this.value = this.$refs.dp.stringify()
			    }
			  },
			  computed:{
			  	genderClass:function(){
			  		return this.user.sex === '男';
			  	},
			  	hasError:function(){
			  		return this.nameError||this.descriptionError||this.dateError;
			  	}
			  },
			  created:function(){
				  $("#user-info").show();
			  },
			  methods:{
			  	genderChange:function(val){
			  		return this.$set('user.sex',val);
			  	},
			  	save:function(){
					//event.defaultPrevented();
					//this.$set('user.description',this.message.replace(/\n|\r\n/g,'<br>'));
					$("#submit").attr("disabled",true);
					this.$set('user.description',this.message);
					var birth = this.user.birthday;
					var reg =/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/;
					if(this.user.birthday==''||birth.match(reg)==null){
						this.$set('dateError',true);
						this.$set('errorMsg.date',"不能为空并且格式为YYYY-MM-DD");
					}else{
						this.$set('dateError',false);
					}
					if(this.hasError){
						$("#submit").attr("disabled",false);
						return ;
					}
					
					if(this.user.nickname==''){
						this.$set('nameError',true);
						this.$set('errorMsg.username',"不能为空")
					}else{
						this.$set('nameError',false);
					}
					if(this.hasError){
						$("#submit").attr("disabled",false);
						return ;
					}else{
						 $.ajax({
							type:"post",
							url:"/hoyo/user/updatePersonInfo",
							data:JSON.stringify(datePicker.user),
							contentType: "application/json; charset=utf-8",
							success:function(msg){
								if(msg=='success'){
									alert("成功保存");
									$("#userName").html(datePicker.user.nickname)
								}else{
									alert("保存失败");
								}
								$("#submit").attr("disabled",false);
							}
						}); 
					}
			 	 },
			  	updateName:function (ta,value) {
			   		var formattedValue = value.trim().replace(/\W/g,'');
			   		ta.value=formattedValue;
			   		if(formattedValue.length>16){
			   			this.$set('nameError',true);
			   			this.$set('errorMsg.username',"不能超过16个字符");
			   		}else{
			   			this.$set('nameError',false);
			   			this.$set('errorMsg.username',"");
			   		}
			   		if(this.user.nickname!=formattedValue){
			   			this.$set('user.nickname',formattedValue);
			   		}
			    },
			    updateDescription:function(value){
			    	if(value.length>160){
			   			this.$set('descriptionError',true);
			   			this.$set('errorMsg.description',"不能超过160个字符");
			   		}else{
			   			this.$set('descriptionError',false);
			   			this.$set('errorMsg.description',"");
			   		}

			    }
			  }
    	});
    </script>
</html>
